<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="获取笑话" class="get"/>
		<input type="button" value="注册用户" class="post"/>
		<hr />
		<div id="app">
			<input type="button" value="获取一条古诗词" v-on:click="getSaying"/>
			<p>{{saying}}{{sfrom}}</p>
		</div>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script>
//			随机获取笑话的接口(接口已经不能用了)
//			请求地址: https://autumnfish.cn/api/ljoke/list
//			请求方法:get
//			请求参数:num
			document.querySelector(".get").onclick=function(){
				axios.get("https://autumnfish.cn/api/ljoke/list?num=2").then(
					function(response){
						console.log(response);
					},
					function(err){
						console.log(err);
					})
			}
			
//			用户注册接口(可以用)
//			请求地址: https://autumnfish.cn/api/user/reg
//			请求方法: post
//			请求参数: username
			document.querySelector(".post").onclick=function(){
				axios.post("https://autumnfish.cn/api/user/reg",{username:"fafa"}).then(
					function(response){
						console.log(response);
					},
					function(err){
						console(err);
					}
				)
			}
		</script>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					saying:"古诗词",
					sfrom:""
				},
				methods:{
					getSaying:function(){
						var that=this;
						axios.get("http://poetry.apiopen.top/sentences").then(
								function(respone){
									//console.log(respone.data.result.name);
									that.saying=respone.data.result.name;
									that.sfrom=respone.data.result.from;
								},
								function(err){
									console.log(err);
								}
							)
						}
					}
					
			})
		</script>
	</body>
</html>
